<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@include file="/WEB-INF/system/include/common.jsp" %>
<!DOCTYPE html>
<html>
<title>角色管理</title>	
<head></head>
<link rel="stylesheet" type="text/css" href="${jsAndCss}/css/style.css" />
<link rel="stylesheet" type="text/css" href="${jsAndCss}/jquery-ztree/3.5.12/css/zTreeStyle/zTreeStyle.min.css" />
<script type="text/javascript" src="${jsAndCss}/js/jquery.js"></script>
<script type="text/javascript" src="${jsAndCss}/jquery-ztree/3.5.12/js/jquery.ztree.all-3.5.min.js"></script>
<script th:inline="javascript" type="text/javascript">
var menuInit=[];

// 声明全局变量
var zNodesDept=[];
var menuTree;
var deptTree;
$(document).ready(function(){
			console.log(${menuIds});
			console.log(${deptIds});
			console.log(${operIds});
			//初始化菜单树
			 $.ajax({
				url:"${ctx}/allMenu",
				async:false,
				success:function(data){
					console.log(data);
				    $.each(data,function(a,b){					
						menuInit[a]={id:b.menuId.toString(),pId:b.parentId.toString(),name:b.menuName};					
					})
				},
				error : function() {
			    	 alert("allMenu error!");
			     }
			}); 
			
			$("#name").focus();

			var setting = {check:{enable:true,nocheckInherit:true},view:{selectedMulti:false},
					data:{simpleData:{enable:true}},callback:{beforeClick:function(id, node){
						menuTree.checkNode(node, !node.checked, true, true);
						return false;
					}}};
			// 用户-菜单
			var zNodesMenu=menuInit;
			/* console.log("zNodes",menuInit); */
			// 初始化树结构
			menuTree = $.fn.zTree.init($("#menuTree"), setting, zNodesMenu);
			// 展开一级节点
			var openNodes = menuTree.getNodesByParam("pId",null);
			/* console.log(openNodes); */
			$.each(openNodes,function(i,n){
				menuTree.expandNode(n,true,false,true);
			});
			// 不选择父节点
			menuTree.setting.check.chkboxType = { "Y" : "ps", "N" : "s" };
			// 默认选择节点		
			var menuIds = ${menuIds};
			for(var i=0; i<menuIds.length; i++) {
				var node = menuTree.getNodeByParam("id", menuIds[i]);
				menuTree.checkNode(node, true, false);	
				menuTree.expandNode(node,true,false,true);
			} ; 
			// 默认展开全部节点
			/* menuTree.expandAll(false); */
			
			//初始化部门树
            $.ajax({
					url:"${ctx}/allDept",
					async:false,
					success:function(data){
						console.log(data);
					    $.each(data,function(a,b){
							
					    	zNodesDept[a]={id:b.deptId.toString(),pId:b.parentId.toString(),name:b.deptName};
							
						})
					},
					error : function() {
				    	 alert("allDept error!");
				     }
				}); 
			 
			// 初始化树结构
			deptTree = $.fn.zTree.init($("#deptTree"), setting, zNodesDept);
			// 不选择父节点
			deptTree.setting.check.chkboxType = { "Y" : "ps", "N" : "s" };
			// 默认选择节点		
			var deptIds = ${deptIds};
			for(var i=0; i<deptIds.length; i++) {
				var node = deptTree.getNodeByParam("id", deptIds[i]);
				deptTree.checkNode(node, true, false);
			} ; 
			// 默认展开全部节点
			deptTree.expandAll(true);
			// 刷新（显示/隐藏）机构
			refreshOfficeTree();
			$("#dataScope").change(function(){
				refreshOfficeTree();
			});
			//获取操作权限数据
			var operIds=${operIds};
			$.each(operIds,function(i,n){
				switch(n){
				case 1:
					$("#1").attr("checked",'true');
					break;
				case 2:
					$("#2").attr("checked",'true');
					break;
				case 3:
					$("#3").attr("checked",'true');
					break;
				case 4:
					$("#4").attr("checked",'true');
					break;
				};
			});
			
			
		});
		function refreshOfficeTree(){
			/* if($("#dataScope").val()==9){
				$("#deptTree").show();
			}else{
				$("#deptTree").hide();
			} */
		}
		

//提交表单		
function submitMgr(){
	//获取表单，角色数据
	var formArray = $("#inputForm").serializeArray();
	console.log(formArray);
	var roleObj={};
	$.each(formArray,function(i,n){
		roleObj[n.name]=n.value;
	});
	console.log(roleObj);
	var roleDto={};
	roleDto["role"]=roleObj;
	//获取菜单树的选中节点数组
	var menuNodes = menuTree.getCheckedNodes(true);	
	console.log(menuNodes);
	var roleMenus =[];
	$.each(menuNodes,function(i,n){
		var roleMenu = {};
		roleMenu["roleId"]=roleObj.roleId;
		roleMenu["menuId"]=n.id;
		
		roleMenus[i]=roleMenu;
	});
	console.log(roleMenus);
	roleDto["roleMenus"]=roleMenus;
	//获取部门树的选中节点数组
	var deptNodes = deptTree.getCheckedNodes(true);	
	console.log(deptNodes);
	var roleDepts =[];
	$.each(deptNodes,function(i,n){
		var roleDept = {};
		roleDept["roleId"]=roleObj.roleId;
		roleDept["deptId"]=n.id;		
		roleDepts[i]=roleDept;
	});
	console.log(roleDepts);
	
	roleDto["roleDepts"]=roleDepts;
	//获取操作权限数据
	var opers = $(".oper");
	console.log(opers);
	var roleOpers = [];
	$.each(opers,function(i,n){
		if(n.checked){
			var roleOper={};
			roleOper['roleId']=roleObj.roleId;
			roleOper['operId']=n.id;
			roleOper['operName']=n.value;
			roleOpers.push(roleOper);
		};
	}); 
	console.log(roleOpers);
	roleDto["roleOpers"]=roleOpers;
	//提交数据
	console.log(roleDto);
	$.ajax({
		type:'post',
		url:'${ctx}/editRole',
		dataType:'json',
		data:JSON.stringify(roleDto),
		contentType:'application/json;charset=UTF-8',
		success:function(data){
			console.log(data);
			alert("保存成功！");
			$("#return")[0].click();
		},
		error:function(){
			alert("editRole error!");			
		}
	});
};		
</script>

<body>
<div style="float:right;margin:0 100px 0 0"><a href="${ctx }/roleList" id="return">返回上一页</a></div>
	<form id="inputForm" class="form-horizontal" action="javascript:submitMgr()" method="post" 
	      style="margin:20px 0 0 50px">
		<input id="id" name="roleId" type="hidden" value="${role.roleId }"/>

		<!-- <div class="control-group">
			<label class="control-label">所属机构:</label>
			<div class="controls">
 
<div class="input-append">
	<input id="officeId" name="office.id" class="required" type="hidden" value="2"/>
	<input id="officeName" name="office.name" readonly="readonly" type="text" value="公司领导" data-msg-required=""
		class="required" style=""/><a id="officeButton" href="javascript:" class="btn  " style="">&nbsp;<i class="icon-search"></i>&nbsp;</a>&nbsp;&nbsp;
</div>
			</div>
		</div>-->
		<div class="kv-item ue-clear">
						<label><span class="impInfo">*</span>角色名称</label>
						<div class="kv-item-content">
							<input type="text" name="roleName" value="${role.roleName }" placeholder="角色名称"
								style="width: 180px" />
						</div>
						<span class="kv-item-tip"></span>
		</div>	
	
		<!-- <div class="control-group">
			<label class="control-label">角色授权:</label>
			<div class="controls">
				<div id="menuTree" class="ztree" style="margin-top:3px;float:left;"></div>
				<input id="menuIds" name="menuIds" type="hidden" value=""/>
				<div id="deptTree" class="ztree" style="margin-left:100px;margin-top:3px;float:left;"></div>
				<input id="officeIds" name="officeIds" type="hidden" value=""/>
			</div>
		</div> -->
		<div class="kv-item ue-clear">
						<label><span class="impInfo">*</span>菜单部门授权</label>
						<div class="kv-item-content">
							<div id="menuTree" class="ztree" style="margin:3px 0 0 30px;float:left;"></div>
							<div id="deptTree" class="ztree" style="margin-left:100px;margin-top:3px;float:left;"></div>
						</div>
						<span class="kv-item-tip"></span>
		</div>
		<div class="kv-item ue-clear">
						<label><span class="impInfo">*</span>操作授权</label>
						<div class="kv-item-content">
							<input class="oper" type="checkBox" id="1" value="增加" />增加
							<input class="oper" type="checkBox" id="2" value="删除" />删除
							<input class="oper" type="checkBox" id="3" value="修改" />修改
							<input class="oper" type="checkBox" id="4" value="查看" />查看
						</div>
						<span class="kv-item-tip"></span>
		</div>	
		<div class="buttons">
			<input id="btnSubmit" type="submit"  value="保 存"/>
			<a href="${ctx }/roleList"><input id="btnCancel" type="button" value="返 回" /></a>
		</div>
	</form>
</body>
</html>